<style lang="less" rel="stylesheet/less" scoped>
	.center{color: #000; font-size: 0.26rem; .user-info{ align-items: center;position: relative; padding: 1rem 0.3rem; background: #009aea; .user-photo{ width: 1.4rem; height: 1.4rem; margin-right: 0.4rem;border-radius: 50%; background: url("../assets/img/wx.png") no-repeat center center; background-size: cover;}
			.user-name{ p{ font-size: 0.32rem;color: #fff;padding-bottom: 0.15rem;}
				span{font-size: 0.24rem;color: #fff;}
				}
			.setting{ font-size: 0.5rem;position: absolute;right: 0.4rem;top: 0.4rem;color: #fff;}
			}
		.card{ margin-top: 0.2rem;text-align: center;background: #fff; line-height: 0.4rem; padding: 0.3rem 0 0.3rem; color: #505050; font-size: 0.28rem; li{ width: 33.3vw; span{color: #b3b3b3;font-size: 0.2rem;}
				}
			.preferential{ border-left: 0.02rem solid #F8F8F8; border-right: 1px solid #F8F8F8;}
			}
		.list{margin-top: 0.2rem;background: #fff; padding: 0.3rem;width: 100%; font-size: 0.3rem; color: #0e0e0e; border-bottom: 0.02rem solid #f8f8f8; line-height: 1rem; li{ span{color: #505050; font-size: 0.28rem;}
				i{vertical-align: top;padding-top: 0.05rem;}
				.icon{color: #009aea;font-size: 0.5rem;padding-right: 0.2rem;padding-top: 0rem;display: inline-block;}
				.right{color: #505050; font-size: 0.28rem;}
				}
			}
		}

</style>
<template>
	<div class="center">
		<!-- 个人信息 -->
		<div class="box-left user-info">
			<div class="user-photo" :style="userImg"></div>
			<div class="user-name">
				<p>点击登陆/注册</p>
				<span>即将开启新的阅读方式</span>
			</div>
			<i class="school icon-setting setting"></i>

		</div>

		<ul class="box-between card">
			<li>
				<p>80分</p><span>信用积分</span></li>
			<li class="preferential">
				<p>2张</p><span>优惠券</span></li>
			<li>
				<p>C</p><span>读者卡</span></li>
		</ul>

		<ul class="list">
			<li @click="pathTo('package')" class="box-between">
				<div class="left">
					<i class="icon school icon-logistics"></i>
					<span>我的书包</span>
				</div>
				<i class="right school icon-right"></i>
			</li>
			<li @click="pathTo('MyOrder')" class="box-between">

				<div class="left">
					<i class="icon school icon-order"></i>
					<span>我的订单</span>
				</div>
				<i class="right school icon-right"></i>
			</li>

			</li>
			<li class="box-between">
				<div class="left">
					<i class="icon school icon-address"></i>
					<span>我的地址</span>
				</div>
				<i class="right school icon-right"></i>

			</li>
			<li @click="pathTo('guide')" class="box-between">
				<div class="left">
					<i class="icon school icon-guide"></i>
					<span>新手指南</span>
				</div>
				<i class="right school icon-right"></i>

			</li>
			<li class="box-between">
				<div class="left">
					<i class="icon school icon-message"></i>
					<span>消息提醒</span>
				</div>
				<i class="right school icon-right"></i>

			</li>

			<li class="box-between" @click="scan">
				<div class="left">
					<i class="icon school icon-message"></i>
					<span>扫一扫</span>
				</div>
				<i class="right school icon-right"></i>

			</li>
		</ul>

	</div>
</template>

</script>
<script>
	var wx = require('weixin-js-sdk');
	export default {
		name: '',
		//数据
		data() {
			return {
				userImg: {
					backgroundImage: "url(" + require("../assets/img/2.png") + ")",
				},
			}
		},
		//计算属性
		computed: {},
		//组件
		components: {},
		//初始化数据
		mounted() {
			document.title = '我的'
			wx.config({
				debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: 'wx821e9beb1e0e055a', // 必填，公众号的唯一标识
				timestamp: Date.parse(new Date()) / 1000,
				nonceStr: 'Wm3WZYTPz0wzccnW', // 必填，生成签名的随机串
				signature: '0f9de62fce790f9a083d5c99e95740ceb90c27ed', // 必填，签名
				jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
			});

		},
		//方法
		methods: {
			pathTo(el) {
				switch(el) {
					case 'package':
						this.$router.push({
							name: "Package"
						});
						break;
					case 'MyOrder':
						this.$router.push({
							name: "MyOrder"
						});
						break;
					case 2:
						this.$router.replace({
							name: "Collection"
						});
						break;
					case 'guide':
						this.$router.push({
							name: "guide"
						});

						break;

				}
			},
			scan() {
				wx.scanQRCode({
					needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
						alert(res)
					}
				});
			}
		},
		//监听数据变化
		watch: {
			'$route' (to, from) {}
		}
	}
</script>